首圖有點害羞，咳，我只是想表達大小的概念(?)
今天來做做關於背景圖片屬性中background-size和background-position的筆記。

background-size

表示的方式可以寫成像素、百分比、cover、contain

像素：background-size: 20px 40px;
第一個數值表示寬度(width)，第二個數值為長度(height)，只填寫一個數值的話，第二個數值會以auto(圖片原本的設定)表示。

百分比：background-size: 40% 100%;
第一個數值表示寬度(width)，第二個數值為長度(height)，只填寫一個數值的話，第二個數值會以auto(圖片原本的設定)表示。

cover：background-size: cover;
將圖片填滿整個容器，若圖片小於容器且像素過低時，容易造成失真。

contain：background-size: contain;
將圖片縮小成可以完整放入容器的大小，可用於圖片大過容器時的情況。

點這裡看看上述的範例(不要問我為什麼畫素這麼差)

background-position

表示的方式可以寫成關鍵字、像素、百分比

關鍵字：background-position: left top;
可以填入left、right、top、bottom、center，若只填一個值，另一個值會以center表示。
可以填center center，但不可填top top或bottom bottom。

像素：background-positon: 10px 60px;
容器左上角為0px 0px。
第一個數值表示水平軸(x軸)，第二個數值為垂直軸(y軸)，只填寫一個數值的話，第二個數值會以50%表示。
像素和百分比可混用，如background-positon: 40px 20%;

百分比：background-positon: 40% 100%;
容器左上角為0% 0%，右下角為100% 100%。
第一個數值表示水平軸(x軸)，第二個數值為垂直軸(y軸)，只填寫一個數值的話，第二個數值會以50%表示。
像素和百分比可混用，如background-positon: 60% 20px;

點這裡看上述範例

上列範例都有搭配background-repeat: no-repeat;
最後利用background-size和background-position練習做出滿版的 banner 結束這回合！

點擊這裡看範例